import mxgraph from 'src/pages/mxgraph/graph/index';
const {
  mxCylinder,
  mxUtils,
  mxRectangle,
  mxCellRenderer,
  mxActor,
  mxConstants,
  mxPoint,
  mxPerimeter,
  mxStyleRegistry,
  mxConnectionConstraint,
  mxShape,
  mxRhombus,
  mxRectangleShape,
  mxHexagon,
  mxEllipse,
  mxDoubleEllipse,
  mxArrowConnector,
  mxConnector,
  mxMarker,
  mxEdgeStyle,
  mxLabel,
  mxImageShape,
  mxSwimlane,
  mxLine,
  mxTriangle,
  mxCloud,
  mxArrow, 
  mxElbowEdgeHandler,
} = mxgraph;

//// 自定义的图形必须注册才能使用 eg.mxCellRenderer.registerShape('testShape', TestShape);

//// 使用方式： 在style中写入 shape=注册的名称

class TestShape extends mxShape {

  constructor(){
    super(...arguments);
  }
  paintVertexShape(c, x, y, w, h){
    console.log(c);
    console.log(x, y, w, h);
    //// 首先平移到cell的0,0,位置
    c.translate(x, y);
		
    //// 一段连续的绘制路径开始
    c.begin();
    //// 设置边线颜色
    c.setStrokeColor('#ff0000');
    //// 设置填充色
    c.setFillColor('#00ff00');
		
    //// 移动绘制起点
    c.moveTo(0, 0);
		
    //// 绘制路径从当前点连到目标点的直线
    c.lineTo(w, 0);
    c.lineTo(w, h);
		
    //// 线段闭合,边回到绘制起点，相当于 c.lineTo(0,0)
    c.close();
		
    //// //// 绘制边线
    //// c.stroke();
		
    //// //// 填充闭合曲线的的内部区域
    //// c.fill();
		
    //// 同时绘制边线和填充区域
    //// 注意fill，stroke，fillAndStroke一个路径只能调用一次
    c.fillAndStroke();
		
    //// 一段绘制结束
    c.end();
    //// c.moveTo
    //// c.moveTo(x+w/2,y+h/2)
    c.begin();
    c.moveTo(0, 0);
    c.setStrokeColor('#666');
    c.setFillColor("#999");

    //// 绘制椭圆路径，rx，ry，椭圆的横轴和纵轴的比值，从当前的点开始，绘制到x,y点
    //// rx, ry, angle, largeArcFlag, sweepFlag, x, y
    //// c.arcTo(1, 1, 0, 0, 1, w, h);
    //// c.arcTo(1, 1, 0, 0, 1, 0, 0);

    //// c.arcTo(w * 0.5, h * 0.5, 0, 0, 1, w, h * 0.5);
    //// c.arcTo(w * 0.5, h * 0.5, 0, 0, 1, w * 0.5, h);
    //// c.arcTo(w * 0.5, h * 0.5, 0, 0, 1, 0, h * 0.5);
    c.fillAndStroke();
    c.end();
    c.begin();
    c.moveTo(0, 0);
		 //// x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation, dir
    c.text(0, 0, w, h, 'AAA阿打算');
		
    c.stroke();
    c.end();

  }

}

mxCellRenderer.registerShape('testShape', TestShape);
class TimeLine extends mxShape {

  constructor(){
    super(...arguments);
  }
  paintVertexShape(c, x, y, w, h){
    const  graphNode = this.state.cell.umlShape.container;
    const showStartPoint = Boolean(mxUtils.getValue(this.style, 'showStartPoint', false));
    const showEndPoint = Boolean(mxUtils.getValue(this.style, 'showEndPoint', false));
    const startPoint =  String(graphNode.getPropertyByPropertyName('起点')?.getValue());
    const endPoint = String(graphNode.getPropertyByPropertyName('终点')?.getValue());
    const step =  Number(graphNode.getPropertyByPropertyName('步长')?.getValue());
    const timeLineName = String(mxUtils.getValue(this.style, 'timeLineName', null) || '一级发射步骤');
    console.log(c);
    console.log(x, y, w, h);
    //// 首先平移到cell的0,0,位置
    c.translate(x, y);
		
    //// 一段连续的绘制路径开始
    c.begin();
    //// 设置边线颜色
    c.setStrokeColor('#000000');
    c.setStrokeWidth(3);
    //// 设置填充色
    c.setFillColor('#000000');
		
    //// 移动绘制起点w
    c.moveTo(-10, h / 2);
		
    //// 绘制路径从当前点连到目标点的直线
    c.lineTo(w + 10, h / 2);
    //// c.lineTo(w, h);

    //// 线段闭合,边回到绘制起点，相当于 c.lineTo(0,0)
    c.close();
		
    //// //// 绘制边线
    c.stroke();
  
    //// //// 填充闭合曲线的的内部区域
    //// c.fill();
		
    //// 同时绘制边线和填充区域
    //// 注意fill，stroke，fillAndStroke一个路径只能调用一次
    //// c.fillAndStroke();
		
    //// 一段绘制结束
    c.end();
    //// c.moveTo
    //// c.moveTo(x+w/2,y+h/2)
    //// c.begin();
    //// c.moveTo(0, 0);
    //// c.setStrokeColor('#666');
    //// c.setFillColor("#999");
    let startX = 0;
    const totalWidth = w;
    const stepPercent = Number(step) / (Number(endPoint) - Number(startPoint) ); 

    c.translate(startX, 0);
    if (showStartPoint){
      c.ellipse(startX - 5, h / 2 - 5, 10, 10);
      c.fillAndStroke();
      //// c.text(0, h / 2 + 15, 10, 10, startPoint);
    }
    if (showEndPoint){
      
      c.setFillColor('#ffffff');
      c.setStrokeWidth(1);
      c.ellipse(w - 6, h / 2 - 6, 12, 12);
      c.stroke();
      c.setFillColor('#000000');
      c.ellipse(w - 3, h / 2 - 3, 6, 6);
      c.fillAndStroke();
      //// c.text(w * 0.98, h / 2 + 15, 10, 10, endPoint);
    }
    if (stepPercent){
      let i = 0;
      for (; stepPercent * i <= 1; i ++){
        c.begin();
        c.moveTo(stepPercent * i * totalWidth + startX, h / 2);
        c.lineTo(stepPercent * i * totalWidth + startX, h / 2 + 10);
        c.stroke();
        c.text(stepPercent * i * totalWidth + startX - 3, h / 2 + 10, 10, 10, `${+startPoint + i * step}`);
        c.end();
      }
     
    }
  
    //// 绘制椭圆路径，rx，ry，椭圆的横轴和纵轴的比值，从当前的点开始，绘制到x,y点
    //// rx, ry, angle, largeArcFlag, sweepFlag, x, y
    //// c.arcTo(1, 1, 0, 0, 1, w, h);
    //// c.arcTo(1, 1, 0, 0, 1, 0, 0);

    //// c.arcTo(w * 0.5, h * 0.5, 0, 0, 1, w, h * 0.5);
    //// c.arcTo(w * 0.5, h * 0.5, 0, 0, 1, w * 0.5, h);
    //// c.arcTo(w * 0.5, h * 0.5, 0, 0, 1, 0, h * 0.5);
    //// c.fillAndStroke();
    //// c.end();
    //// c.begin();
    //// c.moveTo(0, 0);
    ////  //// x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation, dir
    c.text(w + 30, h / 2, 10, 10, '单位(秒)');
    c.text(w / 2 - 30, h / 2 + 30, 20, 20, this.state.cell.umlShape.container.name);
		
    //// c.stroke();
    //// c.end();

  }

}

mxCellRenderer.registerShape('timeLine', TimeLine);
class DeepHistory extends mxShape {

  constructor(){
    super(...arguments);
  }
  paintVertexShape(c, x, y, w, h){
 
    console.log(c);
    console.log(x, y, w, h);
    c.begin();
    c.setStrokeColor('#000000');
    c.ellipse(x, y, w, h);
    c.translate(x, y);
    c.text(w / 2 - 4, h / 2 - 4, 1, 1, `H*`);

    c.stroke();
    c.end();

  }

}

mxCellRenderer.registerShape('deepHistory', DeepHistory);

class ShallowHistory extends mxShape {

  constructor(){
    super(...arguments);
  }
  paintVertexShape(c, x, y, w, h){
 
    console.log(c);
    console.log(x, y, w, h);
    c.begin();
    c.setStrokeColor('#000000');
    c.ellipse(x, y, w, h);
    c.translate(x, y);
    c.text(w / 2 - 4, h / 2 - 4, 1, 1, `H`);

    c.stroke();
    c.end();

  }

}

mxCellRenderer.registerShape('shallowHistory', ShallowHistory);
class CommandAction extends mxShape {

  constructor(){
    super(...arguments);
  }
  paintVertexShape(c, x, y, w, h){
    const  umlShape = this.state.cell.umlShape;
    const timelineDependency  = umlShape.container.getPropertyByPropertyName("指令来源").getValue()?.name;
    const signalType  = umlShape.container.getPropertyByPropertyName("电信号").getValue()?.name;
    const timePoint = umlShape.container.getPropertyByPropertyName('发生时间点').getValue();
    //// const actionType = mxUtils.getValue(this.style, 'actionType', false) || 1;
    //// 电信号 0 未定义 1 通电  -1 断电
    //// const signalType = mxUtils.getValue(this.style, 'signalType', 0) || -1;
    const colorMap = {
      '动力测试总控': '#D48806',
      '控制系统': '#096DD9',
      '发射支持': '#7CB305',
      '垂直瞄准': '#CF1322',
      '测量系统': '#CF1322',
      '发射场工作': '#08979C',
      '未定义': "#000000"
    };
    console.log(c);
    console.log(x, y, w, h);
    //// 首先平移到cell的0,0,位置
    c.translate(x, y);
		
    //// 一段连续的绘制路径开始
    c.begin();
    //// 设置边线颜色
    c.setStrokeColor(colorMap[timelineDependency] || '#000000');
    c.setStrokeWidth(2);
    //// 设置填充色
    c.setFillColor('#000000');
		
    //// 移动绘制起点w
    c.moveTo(w / 2, 0);
		
    //// 绘制路径从当前点连到目标点的直线
    c.lineTo(w / 2, h);
    //// c.lineTo(w, h);
    if (signalType == "通电"){
      c.moveTo(w / 2, 0);
      c.lineTo(w / 2 + 6, 8);
      c.moveTo(w / 2, 0);
      c.lineTo(w / 2 - 6, 8);
    } else if (signalType == "断电"){ 
      c.moveTo(w / 2, h);
      c.lineTo(w / 2 + 6, h - 8);
      c.moveTo(w / 2, h);
      c.lineTo(w / 2 - 6,  h - 8);
    }
    
    //// 线段闭合,边回到绘制起点，相当于 c.lineTo(0,0)
    c.close();
		
    //// //// 绘制边线
    c.stroke();
  
    //// //// 填充闭合曲线的的内部区域
    //// c.fill();
		
    //// 同时绘制边线和填充区域
    //// 注意fill，stroke，fillAndStroke一个路径只能调用一次
    //// c.fillAndStroke();
		
    //// 一段绘制结束
    c.end();
    //// c.moveTo
    //// c.moveTo(x+w/2,y+h/2)
    //// c.begin();
    //// c.moveTo(0, 0);
    //// c.setStrokeColor('#666');
    //// c.setFillColor("#999");
    //// c.text(w / 2 - 20, - 20, 10, 10, `name`);
  }

}

mxCellRenderer.registerShape('commandAction', CommandAction);
class ArrowPort extends mxRectangleShape {

  constructor(){
    super(...arguments);
  }
  drawArror(c, x, y, w, h, position = 'right') {

    c.begin();
    if (position === 'right'){
      c.moveTo(w - 5, h / 2 - 2 );
      c.lineTo(w - 1, h / 2 );
      c.lineTo(w - 5, h / 2 + 2 );
  
    } else if (position === 'left'){
      c.moveTo( 5, h / 2 - 2);
      c.lineTo(0 + 1, h / 2);
      c.lineTo(5, h / 2 + 2);
  
    } else if (position === 'top'){
      c.moveTo( w / 2 - 2,  5);
      c.lineTo(w / 2, 0 + 1);
      c.lineTo(w / 2 + 2, 5);
    } else if (position === 'bottom'){
      c.moveTo( w / 2 - 2,  h - 5);
      c.lineTo(w / 2, h - 1);
      c.lineTo(w / 2 + 2, h - 5);
    }
  
    c.stroke();
    c.end();
  
  }
  paintBackground(c, x, y, w, h){
    super.paintBackground(...arguments);
    const  umlShape = this.state.cell.umlShape;
    const portPosition = umlShape.box.portDirection || 'right';
    const arrowType =  mxUtils.getValue(this.style, 'arrowType', 'none'); //// in/out/inout/null
    if (!arrowType || arrowType === 'none') return;
    c.translate(x, y);
    c.setShadow(false);
    if (portPosition === 'right' || portPosition === 'left') {
      c.begin();
      c.moveTo(0, h / 2); 
      c.lineTo(w, h / 2);
      c.stroke();
      c.end();
      if (arrowType === 'out' ){
        if (portPosition === 'right') {
          this.drawArror(...arguments, 'right');
        } else {
          this.drawArror(...arguments, 'left');
        }
      } else if (arrowType === 'in') {
        if (portPosition === 'right') {
          this.drawArror(...arguments, 'left'); 
        } else {
          this.drawArror(...arguments, 'right');
        }
      } else if (arrowType === 'inout') {
        this.drawArror(...arguments, 'left'); 
        this.drawArror(...arguments, 'right');

      }

    } else {
      c.begin();
      c.moveTo(w / 2, 0);
      c.lineTo(w / 2, h );
      c.stroke();
      c.end();
      if (arrowType === 'out' ){
        if (portPosition === 'top') {
          this.drawArror(...arguments, 'top');
        } else {
          this.drawArror(...arguments, 'bottom');
        }
      } else if (arrowType === 'in') {
        if (portPosition === 'top') {
          this.drawArror(...arguments, 'bottom'); 
        } else {
          this.drawArror(...arguments, 'top');
        }
      } else if (arrowType === 'inout') {
        this.drawArror(...arguments, 'top'); 
        this.drawArror(...arguments, 'bottom');

      }

    } 
  }
}
mxCellRenderer.registerShape('arrowPort', ArrowPort);

class TransitionToSelf extends mxShape {

  constructor(){
    super(...arguments);
  }
  drawArror(c, x, y, w, h, position = 'right') {

    c.begin();
    if (position === 'right'){
      c.moveTo(0, 0);
      c.arcTo(h, w / 2, 0, 0, 1, 0, h); 
      c.moveTo(w * 0.2, h * 0.9);
      c.lineTo(0, h);
      c.lineTo(w * 0.2, h + h * 0.1);
  
    } else if (position === 'left'){
      c.moveTo(w, 0);
      c.arcTo(h, w / 2, 0, 0, 0, w, h);
      c.moveTo(w * 0.8, h * 0.9);
      c.lineTo(w, h);
      c.lineTo(w * 0.8, h + h * 0.1);
  
    } else if (position === 'top'){
      c.moveTo(0, h);
      c.arcTo(w / 2, h, 0, 0, 1, w, h);
      c.moveTo( w * 0.9, h * 0.8);
      c.lineTo(w, h);
      c.lineTo(w + w * 0.1, h * 0.8);
    } else if (position === 'bottom'){
      c.moveTo(0, 0);
      c.arcTo(w / 2, h, 0, 0, 0, w, 0);
      c.moveTo(w * 0.94, h * 0.1);
      c.lineTo(w, 0);
      c.lineTo(w + w * 0.06, h * 0.1); 
    }
  
    c.stroke();
    c.end();
  
  }
  paintVertexShape(c, x, y, w, h){
    super.paintVertexShape(...arguments);
    const  umlShape = this.state.cell.umlShape;
    const portPosition = umlShape.box.portDirection || 'right';
    c.translate(x, y);
    //// c.setShadow(false);
    if (portPosition === 'right') {
      this.drawArror(...arguments, 'right');

    } else if (portPosition === 'left') {
      this.drawArror(...arguments, 'left');

    } else if (portPosition === 'top') {
      this.drawArror(...arguments, 'top');

    } else if (portPosition === 'bottom') {
      this.drawArror(...arguments, 'bottom');

    }
    
  }
}
mxCellRenderer.registerShape('transitionToSelf', TransitionToSelf);

class ImageLabel extends mxImageShape {
  constructor(){
    super(...arguments);
  }
  //// paintBackground(c, x, y, w, h){
  ////   console.log(this);
    
  ////   c.begin();
  ////   c.moveTo(0, 0);
  ////   c.image(x - 16, y + 1, 15, 15, this.image, this.preserveImageAspect, false, false);
  ////   c.end();
  ////   super.paintBackground(c, x, y, w, h);

  //// }
  paintVertexShape (c, x, y, w, h){
    if (this.image != null)
    {
      let fill = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_BACKGROUND, null) || 'rgba(0,0,0,0)';
      let stroke = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_BORDER, null);
		
      if (fill != null)
      {
        //// Stroke rendering required for shadow
        c.setFillColor(fill);
        c.setStrokeColor(stroke);
        c.rect(x, y, w, h);
        c.fillAndStroke();
      }

      //// FlipH/V are implicit via mxShape.updateTransform
      c.image(x - 15, y + 2, 14, 14, this.image, this.preserveImageAspect, false, false);
		
      stroke = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_BORDER, null);
		
      if (stroke != null)
      {
        c.setShadow(false);
        c.setStrokeColor(stroke);
        c.rect(x, y, w, h);
        c.stroke();
      }
    }
    else
    {
      mxRectangleShape.prototype.paintBackground.apply(this, arguments);
    }
  };

}
mxCellRenderer.registerShape('imageLabel', ImageLabel);

class UseCaseCompartment extends mxImageShape {
  constructor(){
    super(...arguments);
  }
  paintVertexShape(c, x, y, w, h){

    if (this.style != null){
      c.setStrokeColor(this.style.strokeColor);
      c.rect(x, y, w, h);
      c.fill();

      c.begin();
      const cellBounds = this.state.cell.umlShape.bounds;
      const parentBounds = this.state.cell.parent.umlShape.bounds;

      console.log(cellBounds, parentBounds);
      const a = parentBounds.width / 2;
      const b = parentBounds.height / 2;
      const y1 = b - cellBounds.y;
      const x1 = Math.sqrt((1 - y1 ** 2 / b ** 2) * a ** 2);
      const moveX = x1 - (a - cellBounds.x);

      c.moveTo(x - moveX, y); 

      if (mxUtils.getValue(this.style, 'top', '1') == '1'){
        console.log('this-----', this);
        c.lineTo(x + cellBounds.width + moveX, y);
      } else {
        c.moveTo(x + cellBounds.width, y);
      }

      c.end();
      c.stroke();
    }
  };

}

mxCellRenderer.registerShape('useCaseCompartment', UseCaseCompartment);

class MessageToSelf extends mxRectangleShape {
  constructor(){
    super(...arguments);
  }
  paintVertexShape(c, x, y, w, h){
    if (!this.outline)
    {
      c.setStrokeColor(null);
    }
    
    this.paintBackground(...arguments);
  
    if (this.style != null)
    {
      c.setStrokeColor(this.style.strokeColor);
      c.rect(x, y, w, h);
      c.fill();
  
      c.begin();
      c.moveTo(x, y);

      c.lineTo(x + w, y); //// top
      c.lineTo(x + w, y + h); //// right
      c.lineTo(x, y + h); //// bottom
      c.end();
      c.stroke();

      c.setFillColor(this.style.strokeColor);
      c.begin();
      c.moveTo(x, y + h); //// bottom
      const size = 4;
      c.lineTo(x + 1.6 * size, y + h - 1 * size);  
      c.lineTo(x + 1.6 * size, y + h + 1 * size); 
      c.lineTo(x, y + h);
      c.close();
      c.end();
      c.fill();

    }
  };

}

mxCellRenderer.registerShape('messageToSelf', MessageToSelf);

